
import Cookies from 'js-cookie'
import { defineStore } from "pinia"
import layoutSeting from '../../layout-seting';
import { ref } from "vue"
export const useLayoutStore = defineStore("layout", () => {
    const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
    // const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = layoutSeting
    const sidebar = ref({
        opened: Cookies.get('sidebarStatus')
            ? !!+Cookies.get('sidebarStatus')
            : true,
        withoutAnimation: false,
        hide: false,
    })
    console.log({ sidebar })
    const topNav = ref(storageSetting.topNav === undefined ? layoutSeting.topNav : storageSetting.topNav)
    const fixedHeader = ref(storageSetting.fixedHeader === undefined ? layoutSeting.fixedHeader : storageSetting.fixedHeader)
    const theme = ref(storageSetting.theme || '#409EFF');
    const device = ref("desktop")
    const size = Cookies.get("size") || "default"
    const sideTheme = ref(storageSetting.sideTheme || layoutSeting.sideTheme)
    const NavbarHeight = ref("48px")
    const tagsView = ref(storageSetting.tagsView === undefined ? layoutSeting.tagsView : storageSetting.tagsView)
    const sidebarLogo = ref(storageSetting.sidebarLogo === undefined ? layoutSeting.sidebarLogo : storageSetting.sidebarLogo)
    const closeSideBar = (withoutAnimation) => {
        Cookies.set('sidebarStatus', 0)
        sidebar.value.opened = false
        sidebar.value.withoutAnimation = withoutAnimation
    }
    const toggleSideBar = (withoutAnimation) => {
        Cookies.set('sidebarStatus', 1)
        if (sidebar.value.hide) {
            return false
        }
        sidebar.value.opened = !sidebar.value.opened
        sidebar.value.withoutAnimation = withoutAnimation
        console.log(sidebar.value.opened)
        if (sidebar.value.opened) {
            Cookies.set('sidebarStatus', 1)
        } else {
            Cookies.set('sidebarStatus', 0)
        }
    }
    return { sidebar, device, size, theme, closeSideBar, toggleSideBar, NavbarHeight, topNav, fixedHeader, tagsView, sideTheme, sidebarLogo }
})